<template>
    <div class="logList">


        
        <div class="logListBody">
            <div class="item" v-for="(logItem,index) in items" >
                <div class="logItemLeft">
                    
                    <img class="logItemHeadDot" :src="iconDot"  v-if="index == 0"/>
                    <img class="logItemHeadDot small" :src="iconDotGray"  v-if="index != 0"/>        
                    
                    <div class="itemLine"></div>
                </div>


                <div class="logItemRight">
                    <div class="logItemHead">
                        <div class="itemLabel" v-if="logItem.label " :class="logItem.labelClass">{{ logItem.label }}</div>
                        <div class="itemLabelRemark">{{ logItem.value }}</div>
                    </div>                    
                    <div v-for="content in logItem.contents" class="contentItem">
                        <div class="contentLabel" :class="content.labelClass">{{ content.label}}</div>
                        <div>：</div>
                        <TextAreaLabel :content="content.value" class="contentValue" :class="content.cssClass"></TextAreaLabel>
                    </div>
                </div>
                
            </div>
           
        </div>

      
    </div>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue';
import { LogItem } from '@/types/common';
import TextAreaLabel from './TextAreaLabel.vue';

interface LogListProp{
    title:string
    items:LogItem[]
}

defineProps<LogListProp>();
 
import iconDot from '@/assets/icons/iconDot.jpg'
import iconDotGray from '@/assets/icons/iconDotGray.jpg'
</script>

<style lang="less" scoped>
.logList{
    width: 100%;
    margin-top:0;
    

    .logListHead{
        display: flex;
        justify-content: center;
        align-items: center;

        .lineImg{
            width: 1rem;
            height: 1px;
        }
        .logTitle{
            font-size: 18px;
            color: #4385f5;
            margin: 0 0.2rem;
            font-weight: bolder; 
        }
    }

    .logListBody{
        width: 100%;
        margin-top: 0.1rem;

        .item{
            width: 100%;
            margin-top: 0;
            margin-bottom:0;
            display: flex;

            .logItemLeft{
                width: 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 4px;
                .logItemHeadDot{
                    margin: 0 5px;
                    width: 15px;
                    height: 15px;
                    margin-bottom: 6px;
                }
                .logItemHeadDot.small{
                    width: 8px;
                    height: 8px;
                    margin-top: 4px;
                }

                .itemLine{
                    border-left: 1px solid #bac1cd;
                    height: 40px;
                    width: 3px;
                    flex-grow: 1;
                }

            }
            .logItemRight{
                width: 200px;
                flex-grow: 1;
                padding-left: 10px;
                padding-bottom: 10px;

                .logItemHead{
                    display: flex;
                    align-items: flex-end;
                    margin-bottom: .1rem;

                    .itemLabel{
                        margin-right: 10px;
                        font-size: 16px;
                        color:#888;
                    }
                    .itemLabelRemark{
                        color: blue;
                        font-size: 16px;
                    }
                }

                .contentItem{
                    font-size: 16px;                    
                    margin-bottom: .1rem;
                    display: flex;

                    .contentLabel{
                        
                    }

                    .contentValue{
                        color:#333;
                        width: 100px;
                        flex-grow: 1;
                    }
                }
            }

            
            .logItemHead{
            
                width: 100%;
                align-items: flex-start;

                .logItemHeadLeft{
                    color: rgb(51, 51, 51);
                    background-color: rgb(243, 243, 243);
                    font-size: 14px;
                    padding: 2px 0;
                    border-radius: 4px;
                    width: 25%;
                    text-align: center;            
                    /* font-weight: bolder; */
                }

                

               
                .logItemHeadRight{
                    color: rgb(67, 133, 245);
                    width: 60%;

                    .notip{
                        color: rgb(135, 135, 135);
                        font-size: 12px;
                    }

                }
            }

            .logItemBody{
                color: rgb(135, 135, 135);
                border-left: 1px solid rgb(210, 210, 210);
                margin-left: calc(25% + 12px);
                font-size: 12px;
                padding: 0rem 0 0 12px;
                padding-bottom:.28rem;
            }

            .logItemBody.last{
              /**  border-left: none;  先屏蔽了 */
            }

          
        }

        .noTip{
            color:#999;
            text-align: center;
            margin-top: -10px;
            font-size: 12px;
        }
    }

   
}
</style>